<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(bannerItem, index) in bannerList"
        :key="index"
      >
        <img :src="bannerItem" />
      </div>
    </div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev" v-show="navBtn"></div>
    <div class="swiper-button-next" v-show="navBtn"></div>
    <!-- swiper分页器 -->
    <div class="swiper-pagination" v-show="pagBtn"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "Swiper",
  props: ["bannerList","navBtn","pagBtn"],
  mounted() {
    this.$nextTick(() => {
      var mySwiper = new Swiper(".swiper-container", {
        loop:true,
        // 水平切换选项
        direction: "horizontal",
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          //分页器类型
          type: "bullets",
          //点击分页器，切换轮播
          clickable: true,
        },

        // 一行显示slider的个数
        // slidesPerView: 1,
        // 定义slides的数量多少为一组
        // slidesPerGroup: 5,
        //自动轮播
        autoplay: {
          delay: 2000,
          //用户操作swiper之后，是否禁止autoplay
          disableOnInteraction: false,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    });
  },
};
</script>

<style lang="less" scoped>
.swiper-container {
  --swiper-theme-color: #333;
  width: 100%;
  height: 88vh;
  overflow: hidden;
  img {
    width: 80%;
    height: 100%;
    margin: 0 10%;
  }
}
</style>
